<!-- 移动端适配 -->
<template>
    <div>
        <header class="header">
            <div>left</div>
            <div>center</div>
            <div>right</div>
        </header>
    </div>
    <div>
        <button @click=" change(36)">大</button>
        <button @click=" change(24)">中</button>
        <button @click=" change(14)">小</button>

    </div>
</template>

<script setup lang='ts'>
// import { ref, reactive } from 'vue'
import { useCssVar } from '@vueuse/core'

const change = (num: number) => {
    const size = useCssVar('--size')
    size.value = num + 'px';
}
</script>

<style scoped lang="scss">
.header {
    display: flex;

    div {
        height: 50px;
        line-height: 50px;
        color: #fff;
        text-align: center;
        font-size: var(--size);
    }

    //vw vh 相对于视口宽高进行控制的
    //百分比是相对于父元素的viewport相对于视口
    div:nth-child(1) {
        width: 100px;
        background-color: #f00;
    }

    div:nth-child(2) {
        flex: 1;
        background-color: #0f0;
    }

    div:nth-child(3) {
        width: 100px;
        background-color: #00f;
    }
}

// 全局字体大小切换
:root {
    --size: 14px;
}
</style>